<template>
  <view>
    <view class="wrap" v-if="msgShow">
		<view class="nodataWrap" v-if="show && messageShow">
			<image class="noMoreImg" src="../../../static/noMessage.svg" mode="aspectFill" lazy-load="false" @error="" @load=""></image>
			<view class="fontInfo">暂无消息...</view>
		</view>
		<view v-if="link != ''" class="consult">
			<view class="consultTitle" @click="getQuestion">问卷填写</view>
			<view class="consultContent"></view>
		</view>
		<view v-if="!messageShow" class="consult" v-for="(item,idx) in consult" :key="idx" @click="getDetail">
			<view class="consultTitle">{{ item.title }}</view>
			<view class="consultContent">{{ item.content }}</view>
		</view>
		
		<view class="chatList" v-if="!show">
			<view class="list" v-for="(item,idx) in list" :key="idx" @click="changeUrl(item.friendUserId,item.friendUserAvatar,item.notes)"> 
				<view class="info">
					<image class="avatar" :src="item.friendUserAvatar != null ? item.friendUserAvatar:'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'">
						<view class="status" v-if="item.unreadNums > 0" style="position: absolute;left:120rpx; width:16rpx; height: 16rpx; background-color: #FF7F0F;"></view>
					</image>
					<!-- <image class="avatar" :src="baseURL+'/'+item.avatar" /> -->
					<view class="contentInfo">
						<view class="infoWrap">
							<view class="name">{{ item.notes }}</view>
							<!-- <view class="status" :style="{background:item.status ? '#4DCB73' : '#8d8d8d'}"></view> -->
						</view>
						<view class="content">{{ item.lastSessionMessage == null ? '': item.lastSessionMessage }}</view>
					</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
		
    </view>
	<view class="wrap" v-if="!msgShow">
		<view class="nodataWrap">
			<image class="noMoreImg" src="../../../static/noMessage.svg" mode="aspectFill" lazy-load="false" @error="" @load=""></image>
			<view class="fontInfo">敬请期待...</view>
		</view>
	</view>
    <!-- 底部tab -->
    <!-- flag等于几取决于组件页面的id -->
    <tablebox class="flex:none" flag="2"></tablebox>
  </view>
</template>
<script>
import tablebox from '../../../components/tabBox.vue';
import { sessionList, readMessage, getConsultInfo, sysMsgRead } from '../../../utils/api'
import { baseURL } from '../../../utils/baseUrl';
import { showInfoFunc } from '../../../utils/common';
export default {
  components: {
    tablebox,
  },
  data(){
    return{
      baseURL,
	  link:'',
	  msgShow: false,
	  moreClick: true,
	  show: false,
	  messageShow: false,
	  pageNo:1,
	  isAdd:true, //是否新增页面
	  userInfo:{},
	  consult:[],
      list:[]
    }
  },
  onLoad(){
	this.msgShow = showInfoFunc("消息") == undefined ? false : true
  },
  onShow(){
	this.list = [];
	this.pageNo = 1;
    this.initData();
	this.getMessage();
	this.getNewConsultMsg();
	let link = uni.getStorageSync('questionLink')
	this.link = link
  },
  onHide(){
  	  this.isAdd = true;
	  this.show = false
	  this.messageShow = false
  },
  methods: {
	getQuestion(){
		uni.navigateTo({
			url: `../../../subPackagesB/pages/WebView/WebView?url=${encodeURIComponent(this.link)}`
		});
		uni.setStorageSync('questionLink','')
	},
	// 查询资讯列表
	async getDetail(){
		const params = {
			receiverid:this.userInfo.id,
			pushType:'咨询消息',
			status:1
		}
		await sysMsgRead(params)
		uni.navigateTo({
			url:`../../../subPackagesA/pages/consultDetail/consultDetail?userid=${this.userInfo.id}`
		})
	},
	// 获取最新咨询消息
	async getNewConsultMsg(){
		const res = await getConsultInfo(this.userInfo.id,1,1);
		if(res.result.records.length){
			this.consult = res.result.records
		}else{
			this.messageShow = true
		}
	},
	// 获取socket消息
	getMessage(){
		let _this = this;
		uni.onSocketMessage(function (res) {
			let message = JSON.parse(res.data)
			console.log("socket消息",message)
			if(message.code == 54268449){
				if(_this.consult.length){
					console.log("数据执行",)
					let arr = _this.consult;
					arr[0].title = message.object.title
					arr[0].content = message.object.content
					_this.consult = arr
					console.log("数据执行`",_this.consult)
				}else{
					let arr = [];
					arr.push({
						title: message.object.title,
						content: message.object.content
					})
					_this.consult = arr
				}
			}else{
				// const idx = _this.list.findIndex(item => item.friendUserId == message.object.friendUserId);
				// if(idx == -1){
				// 	_this.list.unshift(message.object)
				// }else{
				// 	_this.list[idx] = message.object
				// 	_this.list.unshift(_this.list.splice(idx,1)[0])
				// }		
				_this.list.unshift(message.object)
				_this.list = _.uniqBy(_this.list,'friendUserId')
			}
			
		});
	},
    async initData(){
		if(this.isAdd){
		  let userInfo = wx.getStorageSync('userInfo');
		  this.userInfo = userInfo
		  const res = await sessionList(userInfo.id,this.pageNo);		  
		  if(!res.result.records.length){
			this.show = true;
			return
		  }
			this.list = [...this.list,...res.result.records];
			if(res.result.records.length < 20){
				this.isAdd = false;
			}
		}
	  
    },
    async changeUrl(toUserId,toAvatar,notes){
		if(this.moreClick){
			let _this = this;
			this.moreClick = false
			if(notes == "系统消息"){
				const params = {
					receiverid:this.userInfo.id,
					pushType:'系统消息',
					status:1
				}
				await sysMsgRead(params)
				uni.navigateTo({
					url:`../../../subPackagesA/pages/consultDetail/consultDetail?userid=${this.userInfo.id}&type=sys`,
				})
			}else{
				const params = {
					recipientUserId:this.userInfo.id,
					senderUserId:toUserId
				}
				await readMessage(params)
				uni.navigateTo({
					url:`../../../subPackagesA/pages/chat/chat?toUserId=${toUserId}&toAvatar=${toAvatar}&notes=${notes}`
				})
			}
			setTimeout(() => {
				_this.moreClick = true
			}, 2000);
		}
		
		
    }
  },
  onReachBottom() {
	  if(this.isAdd){
		  this.pageNo ++;
		  this.initData();
	  }
  },
  
};
</script>
<style lang="less" scoped>
.chatList{
	margin-top: 30rpx;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
}
// .sysInfo{
// 	display: flex;
// 	margin-top: 10rpx;
// 	.sysSendTime{
// 		font-size: 10px;
// 		color: #737B80;
// 	}
// 	.sysStatus{
// 		font-size: 10px;
// 		margin-left: 10rpx;
// 	}
// }
.consult{
	padding: 30rpx;
	background-color: #fff;
	border-radius: 10rpx;
	margin-top: 30rpx;
	.consultTitle{
		color: #121212;
	}
	.consultContent{
		color: #737B80;
		font-size: 12px;
		margin-top: 10rpx;
	}
}
.nodataWrap{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.noMoreImg{
		width: 400rpx;
		height: 400rpx;
	}
	.fontInfo{
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #737B80;
		line-height: 40rpx;
	}
}

  .status{
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background-color: #4DCB73;
	text-align: right;
  }
  .line{
    width: 100%;
    height: 2rpx;
    background-color: #f5f5f5;
    margin: 20rpx 0;
  }
  .content{
    margin-top: 24rpx;
    color: #8C8C8C;
    margin-left: 20rpx;
    font-size: 12px;
	width: 500rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
  }
  .infoWrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin-left: 20rpx;
	width: 100%;
    .info{
      display: flex;
      align-items: center;
    }
  }
  .name{
    font-weight: 700;
    font-size: 14px;
  }
  .list{
    width: 100%;
  }
  .info{
	  display: flex;
  }
  .avatar{
	  width: 100rpx;
	  height: 100rpx;
	  border-radius: 8rpx;
	  position: relative;
  }
.wrap{
    padding: 30rpx;
}
</style>

<style>
page{
	background-color: #F5F5F5;
}
</style>